Skip to content

[WIP] Add Storybook reproduction for SelectPanel screen-reader announcement bug - #8407

Draft
siddharthkp with Copilot wants to merge 3 commits into
mainfrom
copilot/create-selectpanel-reproduction-story
Draft

[WIP] Add Storybook reproduction for SelectPanel screen-reader announcement bug#8407
siddharthkp with Copilot wants to merge 3 commits into
mainfrom
copilot/create-selectpanel-reproduction-story

Conversation

Copilot AI commented Sep 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Adds a Storybook-only reproduction (no fix) for a SelectPanel screen-reader announcement bug.

Actual behavior

When a <live-region> element exists inside a closed native <dialog> earlier in the DOM, SelectPanel's FilteredActionList/useAnnouncements path finds it via document.querySelector('live-region') and writes announcements there. A closed <dialog> is display: none and excluded from the accessibility tree, so the empty-state message ("No language found for …") is never announced by a screen reader.

Expected behavior

The empty-state message should be announced when the filter returns no results, regardless of unrelated live regions elsewhere on the page.

Control case

Unchecking the checkbox removes the closed-dialog live region; SelectPanel then falls back to creating/using a body-level live region and the message is announced correctly.

Reproduction only

No announcement logic is added in the story and no fix is included in this PR — the story exercises SelectPanel's existing announcement path.

  • Add WithLiveRegionInsideClosedDialog story to SelectPanel.dev.stories.tsx (copied from the simplest existing searchable dev story)
  • Checkbox "Render a live region inside a closed dialog", checked by default, conditionally rendering <live-region /> inside a closed <dialog>
  • Human verification guidance rendered in a <p> above the demo
  • Validated: prettier --check, tsc --noEmit, eslint, storybook.test.tsx, SelectPanel.test.tsx
  • No changeset (stories-only change; needs skip changeset label)
Original prompt

Create a draft pull request containing a minimal Storybook reproduction for a SelectPanel screen-reader announcement bug. Do not fix the bug in this PR.

Requirements:

  1. Add the reproduction story to the existing SelectPanel.dev.stories file. Follow repository instructions and copy the simplest existing searchable SelectPanel story in that file rather than inventing a new setup.
  2. Add a checkbox in the rendered story, checked by default, that conditionally renders a <live-region /> inside a closed native <dialog> (the dialog must not have the open attribute). Render the searchable SelectPanel outside that dialog.
  3. Keep the copied story's normal item/filter state and empty-state message. Do not add custom announcement logic: the reproduction must exercise SelectPanel's existing FilteredActionList/useAnnouncements path.
  4. Render this human verification guidance in a <p> above the demo: “Open the SelectPanel and enter a query with no results. With the checkbox enabled, the empty-state message is not announced. Disable the checkbox and repeat; the message is announced through a body-level live region.”
  5. Give the story and checkbox clear names describing the closed-dialog live-region condition.
  6. Validate the focused story using the repository's standard formatting, type checking, and Storybook/test commands that apply to the changed file.
  7. Create the resulting pull request as a draft. In the PR description, explain the actual behavior, expected behavior, control case, and that this is reproduction-only.

Technical context: both SelectPanel/FilteredActionList and @primer/live-region-element can locate a live region using a document/container querySelector('live-region'). If the first matching live region is inside a closed native dialog, the message is written there, but that dialog has display: none and is excluded from the accessibility tree, so screen readers do not announce it. Removing the closed-dialog live region allows a body-level live region to be used and the announcement succeeds.

@changeset-bot

changeset-bot Bot commented Sep 9, 2026 •
edited
Loading

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: d3a7d0d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@siddharthkp
Add SelectPanel repro story for live region inside closed dialog
2a3d8a3 
Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>
Copilot AI requested a review from siddharthkp September 9, 2026 13:02
@siddharthkp siddharthkp added the skip changeset This change does not need a changelog label Sep 9, 2026
@github-actions
github-actions Bot temporarily deployed to storybook-preview-8407 September 9, 2026 13:13 Inactive
@siddharthkp
Improve SelectPanel live region reproduction
d3a7d0d 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 23, 2026
@github-actions

github-actions Bot commented Sep 23, 2026

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

This branch was successfully deployed

2 active deployments
storybook-preview-8407 — d3a7d0dd Deployed Sep 23, 2026 by github-actions[bot]
View deployment
github-pages — d3a7d0dd Deployed Sep 23, 2026 by siddharthkp via deploy-preview #33422
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@siddharthkp siddharthkp Awaiting requested review from siddharthkp
Copilot code review Copilot
Copilot will automatically review once the pull request is marked ready for review

At least 1 approving review is required to merge this pull request.

Assignees

@siddharthkp siddharthkp

Copilot code review Copilot

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm skip changeset This change does not need a changelog

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@siddharthkp